/* 
接入编辑功能
1 onLoad 来接收id 
  判断 是否存在id 来判断出当前是 新增-编辑 
  有 id 就是 编辑 
   1 设置页面的title  修改报修信息
   2 根据id 获取 编辑的详情 
   3 设置到页面中
  无id 就是新增
   1 设置页面的title  填写报修信息
2 提交 
  1 判断一下有没有id 。。。 

 */

import dayjs from 'dayjs'
import Schema from 'validate'

// 创建验证规则
const repairInfo = new Schema(
  {
    // 房屋id
    houseId: {
      type: String, // 类型
      required: true, // 非空
      message: '维修房屋不能为空', // 提示信息
    },
    // 房屋id
    repairItemId: {
      type: String, // 类型
      required: true, // 非空
      message: '维修项目不能为空', // 提示信息
    },
    // 手机号码
    mobile: {
      type: String, // 类型
      match: /^1[3-9]\d{9}$/, // 手机号码
      message: '手机不合法', // 提示信息
    },
    // 预约日期
    appointment: {
      type: String, // 类型
      required: true, // 非空
      message: '预约日期不能为空', // 提示信息
    },
    // 问题描述
    description: {
      type: String, // 类型
      length: { min: 1, max: 200 },
      message: '问题描述1-200字', // 提示信息
    },
    // 附件列表
    attachment: {
      type: Array, // 数组类型
      // use 要接收一个对象，对象中 放一个函数，函数就是我们自定义的验证规则
      use: {
        // 函数名称自定义
        // v 稍后要验证的字段的值  此时它表示  附件列表数组
        // 函数必须返回 true或者false，   如果验证通过，返回true ， 如果验证不通过，返回false
        listLengthValidate(v) {
          return !!v.length
        },
      },
      message: '问题附近不能为空',
    },
  },
  { strip: false } // 解决 验证对象后，数据丢失属性的问题！！
)

Page({
  data: {
    // 当前日期 时间戳
    currentDate: new Date().getTime(),
    // 选择保修房屋组件 显示隐藏
    houseLayerVisible: false,
    // 选择维修组件 显示隐藏
    repairLayerVisible: false,
    // 预约日期组件 显示和隐藏
    dateLayerVisible: false,
    // 选择保修房屋组件 要显示 待维修房屋列表
    houseList: [],
    // 选择维修组件 要显示 维修项目
    repairItem: [],
    // 用户选择待维修的房屋的id
    houseId: '',
    // 用户选择的待维修的房屋的名称
    houseInfo: '',
    // 用户选择报修项目的id
    repairItemId: '',
    // 用户选择报修项目的名称
    repairItemName: '',
    // 手机号码
    mobile: '',
    // 预约日期
    appointment: '',
    // 问题描述
    description: '',
    // 问题附件 图片列表
    attachment: []
  },
  onLoad({ id }) {
    if (id) {
      // 编辑
      wx.setNavigationBarTitle({ title: '修改报修信息' })
      this.getRepairInfo(id)
    } else {
      // 新增
      wx.setNavigationBarTitle({ title: '新增报修信息' })
    }
    // 获取真实 维修房屋 列表
    this.getHouseList()
    // 获取真实 维修项目 列表
    this.getRepairItems()
  },

  // 根据id来查询报修详情
  async getRepairInfo(id) {
    const res = await wx.http({ url: `/repair/${id}` })
    console.log(res);
    // 解构
    const { status, ...data } = res.data
    this.setData(data)
  },

  // 获取真实 维修房屋 列表
  async getHouseList() {
    const res = await wx.http({ url: '/house' })
    // console.log(26, res);
    this.setData({
      houseList: res.data
    })
  },

  // 获取真实 维修项目 列表
  async getRepairItems() {
    const res = await wx.http({ url: '/repairItem' })
    // console.log(46, res);
    this.setData({
      repairItem: res.data
    })
  },
  // 设置 选择保修房屋组件 显示
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  // 设置 选择保修房屋组件 隐藏
  closeHouseLayer() {
    // console.log('点击房屋');
    this.setData({ houseLayerVisible: false })
  },

  //选择了要维修的房屋
  onHouseSelect(ev) {
    // console.log(ev);
    this.setData({
      houseId: ev.detail.id,
      houseInfo: ev.detail.name
    })
  },

  // 选择了要维修的项目
  onRepairItemSelect(ev) {
    this.setData({
      repairItemId: ev.detail.id,
      repairItemName: ev.detail.name
    })
  },

  // 设置 选择维修项目组件 显示
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  // 设置 选择维修项目组件 关闭
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },
  // 设置 预约日期组件 显示
  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  // 设置 预约日期组件 隐藏
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  goList() {
    wx.reLaunch({
      url: '/repair_pkg/pages/list/index',
    })
  },

  // 选中日期
  onDateTimeConfirm(ev) {
    // 返回的是 时间戳 2022-10-01
    // 把时间戳 转成 2022-10-01 格式 ！！   dayjs.js  moment.js
    // console.log(ev.detail)
    this.setData({
      appointment: dayjs(ev.detail).format('YYYY-MM-DD'),
      dateLayerVisible: false
    })
  },
  // 取消日期
  onDateTimeCancel() {
    this.setData({ dateLayerVisible: false })
  },

  // 选择上传问题附件
  onAfterRead(ev) {
    // console.log(ev.detail.file.thumb);
    // 获取临时文件路径
    const thumb = ev.detail.file.thumb
    // 调用小程序 文件上传api 文件上传

    wx.uploadFile({
      url: wx.http.baseURL + '/upload',
      filePath: thumb,
      name: 'file',
      header: {
        Authorization: `Bearer ${getApp().token}`,
      },
      success: (res) => {
        // console.log(res);
        const data = JSON.parse(res.data)
        console.log(data);

        // 获取到data中的数组
        const { attachment } = this.data
        // 给数组添加新元素
        attachment.push(data.data)
        this.setData({ attachment })
      },
      fail: (err) => {
        console.log(err);
      }
    })
  },

  // 删除上传的图片
  onDelete(ev) {
    // console.log(ev);

    // 弹出对话框 确认框 用户点击确认了 才执行删除
    wx.showModal({
      title: '提示',
      content: '您确定删除吗?',
      success: ({ confirm }) => {
        if (confirm) {
          // 执行删除
          const index = ev.detail.index
          // 获取到data中的数组
          const { attachment } = this.data
          // 给数组添加新元素
          attachment.splice(index, 1)
          this.setData({ attachment })
        }
      }
    })
  },

  // 提交报修
  async onSubmit() {
    /* 
    1 获取接口要求的表单数据 
    2 进行表单验证  validate.js 
      1 引入
      2 编写字段的验证规则

    3 调用接口完成 提交报修 
    4 提示用户 操作成功
    5 等待一会 跳转到 报修列表页面 
     */
    const { id, appointment, attachment, description, houseId, mobile, repairItemId } = this.data
    const params = { id, appointment, attachment, description, houseId, mobile, repairItemId }

    // 对params.id 做一个判断，如果等于undefined 就删除 id属性
    if (params.id === undefined) {
      // 删除对象中的属性
      delete params.id
    }

    // 开始验证
    const errors = repairInfo.validate(params) // 默认情况，会自动的帮你移除到 要验证的对象中属性（如果这个属性没有在你的验证规则中出现），

    if (errors.length) {
      // 有错误
      return wx.utils.toast(errors[0].message)
    }

    // 构造数据，调用接口发送给后端
    // console.log(params)
    const res = await wx.http({
      url: '/repair',
      method: 'post',
      data: params,
    })
    // console.log(res);

    // 判断是否成功
    if (res.code !== 10000) {
      return wx.utils.toast(res.message)
    }

    wx.showToast({ title: '操作成功' }) // 默认图标 成功

    setTimeout(() => {
      // 跳转回房屋列表页面
      wx.navigateTo({
        url: '/repair_pkg/pages/list/index'
      })
    }, 1500)
  }
})
